<div class='row' id='content-wrapper'>
            <div class='col-xs-12 wigetdrapdrop '>
              <div class='row'>
                <div class='col-sm-12'>
                  <div class='page-header'>
                    <h1 class='pull-left'>
                      <i class='icon-th'></i>
                      <span>Grid</span>
                    </h1>
                    <div class='pull-right'>
                      <ul class='breadcrumb'>
                        <li>
                          <a href='index.html'>
                            <i class='icon-bar-chart'></i>
                          </a>
                        </li>
                        <li class='separator'>
                          <i class='icon-angle-right'></i>
                        </li>
                        <li class='active'>Grid</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <p class='lead'>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.</p>
                </div>
              </div>
              <div class='row'>
                <div class='col-sm-12'>
                  <h3>Mobile and desktop</h3>
                  <p class='lead'>
                    Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding
                    <code>.col-xs-*</code>
                    <code>.col-md-*</code>
                    to your columns. See the example below for a better idea of how it all works.
                  </p>
                </div>
              </div>
              <div class='row'>
                <div class='col-xs-12 col-md-8'>
                  <div class='well well-sm'>.col-xs-12 .col-md-8</div>
                </div>
                <div class='col-xs-6 col-md-4'>
                  <div class='well well-sm'>.col-xs-6 .col-md-4</div>
                </div>
              </div>
              <div class='row'>
                <div class='col-xs-6 col-md-4'>
                  <div class='well well-sm'>.col-xs-6 .col-md-4</div>
                </div>
                <div class='col-xs-6 col-md-4'>
                  <div class='well well-sm'>.col-xs-6 .col-md-4</div>
                </div>
                <div class='col-xs-6 col-md-4'>
                  <div class='well well-sm'>.col-xs-6 .col-md-4</div>
                </div>
              </div>
              <div class='row'>
                <div class='col-xs-6'>
                  <div class='well well-sm'>.col-xs-6</div>
                </div>
                <div class='col-xs-6'>
                  <div class='well well-sm'>.col-xs-6</div>
                </div>
              </div>
              <hr class='hr-half'>
              <div class='row'>
                <div class='col-sm-12'>
                  <h3>Mobile, tables & desktops</h3>
                  <p class='lead'>
                    Build on the previous example by creating even more dynamic and powerful layouts with tablet
                    <code>.col-sm-*</code>
                    classes.
                  </p>
                </div>
              </div>
              <div class='row'>
                <div class='col-xs-12 col-sm-6 col-md-8'>
                  <div class='well well-sm'>.col-xs-12 .col-sm-6 .col-md-8</div>
                </div>
                <div class='col-xs-6 col-sm-6 col-md-4'>
                  <div class='well well-sm'>.col-xs-6 .col-sm-6 .col-md-4</div>
                </div>
              </div>
              <div class='row'>
                <div class='col-xs-6 col-sm-4 col-md-4'>
                  <div class='well well-sm'>.col-xs-6 .col-sm-4 .col-md-4</div>
                </div>
                <div class='col-xs-6 col-sm-4 col-md-4'>
                  <div class='well well-sm'>.col-xs-6 .col-sm-4 .col-md-4</div>
                </div>
                <div class='col-xs-6 col-sm-4 col-md-4'>
                  <div class='well well-sm'>.col-xs-6 .col-sm-4 .col-md-4</div>
                </div>
              </div>
              <hr class='hr-half'>
              <div class='row'>
                <div class='col-sm-12'>
                  <h3>Offsetting columns</h3>
                  <p class='lead'>
                    Move columns to the right using
                    <code>.col-md-offset-*</code>
                    classes. These classes increase the left margin of a column by * columns. For example,
                    <code>.col-md-offset-4</code>
                    moves
                    <code>.col-md-4</code>
                    over four columns.
                  </p>
                </div>
              </div>
              <div class='row'>
                <div class='col-md-4'>
                  <div class='well well-sm'>.col-md-4</div>
                </div>
                <div class='col-md-4 col-md-offset-4'>
                  <div class='well well-sm'>.col-md-4 .col-md-offset-4</div>
                </div>
              </div>
              <div class='row'>
                <div class='col-md-3 col-md-offset-3'>
                  <div class='well well-sm'>.col-md-3 .col-md-offset-3</div>
                </div>
                <div class='col-md-3 col-md-offset-3'>
                  <div class='well well-sm'>.col-md-3 .col-md-offset-3</div>
                </div>
              </div>
              <div class='row'>
                <div class='col-md-6 col-md-offset-3'>
                  <div class='well well-sm no-mg-b'>.col-md-6 .col-md-offset-3</div>
                </div>
              </div>
	</div>
	<!-- end form -->


	<?php echo $this->action('index','magazinepublish','administrator');?>



</div>

